<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>聚光灯效果</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spotlight18 {
            color: #eaeaea;
            font-size: 40px;
            font-weight: 900;
            text-transform: uppercase;
            position: relative;
        }

        .spotlight18:before {
            width: inherit;
            height: inherit;
            content: attr(data-cont);
            color: transparent;
            background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e28d 100%);
            -webkit-background-clip: text;
            position: absolute;
            top: 0;
            left: 0;
            animation: spotlight18 8s linear infinite;
        }

        @keyframes spotlight18 {
            0% {
                clip-path: ellipse(32px 32px at 0 50%);
            }

            50% {
                clip-path: ellipse(32px 32px at 100% 50%);
            }

            100% {
                clip-path: ellipse(32px 32px at 0 50%);
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="spotlight18" data-cont="spotlight">spotlight</div>
    </div>
</body>

</html>